<template>
  <div id="enterInfo" v-loading.fullscreen.lock="fullscreenLoading">
    <h2>信息录入</h2>
    <section class="part">
      <el-form class="formList" label-width="80px" :model="formData">
        <el-form-item label="参与项目">
          <el-select v-model="formData.projectId" placeholder="参与的项目">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业角色">
          <el-select v-model="formData.companyRole" placeholder="企业角色">
            <el-option
              v-for="item in roleoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="企业名">
          <el-input placeholder="请输入企业名" @change="testCompany" v-model="formData.companyName"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-input placeholder="请输入职务" v-model="formData.position"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址">
          <el-input placeholder="请输入通讯地址" v-model="formData.address"></el-input>
        </el-form-item>
      </el-form>
    </section>
    <section class="part" style="text-align:center">
      <table border class="filetable">
        <thead>
          <tr>
            <th>文件名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in fileList" :key="index">
            <td v-if="item.typenew == 'new'">
              <el-input
                v-model="item.name"
                placeholder="请输入文件名称"
              ></el-input>
            </td>
            <td v-else>{{item.name}}</td>
            <td>
              <!-- <el-upload
                class="upload-demo"
                :action="imgUrl"
                :on-preview="handlePreview"
                :before-upload="beforefun"
                :on-remove="handleRemove"
                :on-success="fileUploadSuc.bind(this, index)"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="item.file"
              > -->
                <el-button size="small" type="warning" @click="clickBtn(item, index)">点击上传</el-button>
                <el-button size="small" v-if="item.typenew == 'new'" type="warning" @click="delBtn(item, index)">删除</el-button>
                <p style="font-size: 14px; color: #606266">{{item.fileName}}</p>
              <!-- </el-upload> -->
            </td>
          </tr>

          <tr>
            <td colspan="2" @click="addfiles">
              <i class="iconfont iconjixutianjia"></i>添加其他附件
            </td>
          </tr>
        </tbody>
      </table>
      <input type="file" class="img_input" ref="portrait" @change="selectFile" />
      <el-button class="next" type="primary" @click="goNext">提交</el-button>
    </section>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      fullscreenLoading: false,
      formData: {
        companyRole: "",
        projectId: ""
      },
      options: [],
      roleoptions: [
        { value: "业务岗", label: "业务岗" },
        { value: "财务岗", label: "财务岗" },
        { value: "运营岗", label: "运营岗" },
        { value: "管理人员", label: "管理人员" }
      ],
      imgUrl: this.$imgUrl,
      fileList: [
        { name: "章程", file: '',fileName: '',type: ''},
        { name: "法人身份证", file: '', fileName: '', type: ''},
        { name: "供应商营业执照", file: '',fileName: '',type: ''},
        { name: "供应商资质文件", file: '', fileName: '', type: ''},
        { name: "执行通知书及支付凭证", file: '', fileName: '',type: ''}
      ],
      fileList1: [
        { name: "章程", file: '',fileName: '',type: ''},
        { name: "法人身份证", file: '', fileName: '', type: ''},
        { name: "供应商营业执照", file: '',fileName: '',type: ''},
        { name: "供应商资质文件", file: '', fileName: '', type: ''},
        { name: "执行通知书及支付凭证", file: '', fileName: '',type: ''}
      ],
      files: [],
      tempId: 0,
      tempItem: '',
      tempIndex: '',
      file: ''
    };
  },
  mounted() {
    this.apiGetProList();
  },
  methods: {
    delBtn(item, index) {
      this.fileList.splice(index, 1);
    },
    testCompany(val) {
      this.$api.apiTwoCompanyName({ companyName: val }).then(res => {
        if (res.data.data != 0) {
          this.$message({
            type: "error",
            message: "企业名重复"
          });
        } else {
          this.$message({
            type: "success",
            message: "企业名可用"
          });
        }
      });
    },
    downfile() {
      let param = {
        fileType: 2,
        fileUrl: "E:/dev/0cb8475618e54c3da1fb1556cc5b1856.docx",
        name: "章程"
      };

      this.axios
        .get("http://192.168.0.127:8091/AdminAPI/upload/downFile", {
          params: param,
          responseType: "blob"
        })
        .then(res => {
          this.downFile(res.data, file.title);
        });
    },
    apiGetProList() {
      this.$api.apiGetCustomerList().then(({ data }) => {
        this.options = data.data;
      });
      this.$api.apiGetComRole().then(({ data }) => {
        this.roleoptions = data.data;
      });
    },
    // handleRemove(file, fileList) {
    //   this.files.forEach((item, index) => {
    //     if (item.url === file.response.data.filePath) {
    //       this.files.splice(index, 1);
    //     }
    //   });
    // },
    // handlePreview(file) {
    //   console.log(file);
    // },
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 1 个文件，本次选择了 ${
    //       files.length
    //     } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    //   );
    // },
    // fileUploadSuc(index, { data }, file, fileList) {
    //   // console.log(index, data, file, fileList);
    //   // console.log(this.fileList)
    //   //   let tempIdIndex = this.files.findIndex((item, index)=> {
    //   //       return item.tempId ==
    //   //   })
    //   let item = this.fileList[index];
    //   // console.log(this.file);
    //   let tempId = 0;
    //   let fileitem = {
    //     name: item.name,
    //     type: data.state,
    //     url: data.filePath
    //   };
    //   this.files.push(fileitem);
    // },
    clickBtn (item, index) {
      this.tempItem = item; 
      this.tempIndex = index;
      let file = this.$refs.portrait;
      file.value = ''; 
      // file.outerHTML = file.outerHTML
      this.$refs.portrait.click();
    },
    selectFile: function (e) {
      // this.info.voucher = e.target.files[0].name; // 获取图片的名字
      this.file = e.target.files[0]; // 获取图片的所有属性
      // let reader = new FileReader();
      // reader.addEventListener('load', () => {
      //   this.userImg = reader.result;
      // }, false);
      // if (this.file) {
      //   reader.readAsDataURL(this.file);
      // }
      let fm = new window.FormData(); // 创建一个表单
      fm.append('file', this.file); // apend到这个字段,后台凭证接受的字段
      // fm.append('ids', this.$route.query.id); // apend到这个字段，后台id接受的字段
      this.fullscreenLoading = true;
      axios.post(this.imgUrl, fm, {headers: {'Content-Type': 'multipart/form-data'}})
        .then(({data}) => {
          if (data.code == 200) {
            this.fileList[this.tempIndex].file = data.data.filePath;
            this.fileList[this.tempIndex].fileName= data.data.fileName;
            this.fileList[this.tempIndex].type = data.data.state;
          }
          this.fullscreenLoading = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    addfiles() {
      this.tempId += this.tempId + 1;
      let file = {
        name: "",
        file: '',
        type: '',
        typenew: 'new',
        fileName: ''
      };
      this.fileList.push(file);
    },
    goNext() {
      // let isEmpty = true;
      // if (this.files.length > 0) {
      //   isEmpty = this.files.every(item => {
      //     if (item.name == "") {
      //       this.$message({
      //         type: "warning",
      //         message: "文件名称不可为空"
      //       });
      //       return false;
      //     } else {
      //       if (item.url == "") {
      //         this.$message({
      //           type: "warning",
      //           message: "请上传文件"
      //         });
      //         return false;
      //       } else {
      //         return true;
      //       }
      //     }
      //   });
      // } else {
      //   this.$message({
      //     type: "warning",
      //     message: "请上传文件"
      //   });
      //   return;
      // }
      // if (!isEmpty) return;
      let param = Object.assign(this.formData);
      let findItem = this.fileList.find((item, index)=> {
        return (item.name == '' || item.file == '');
      })
      // console.log(findItem)
      if (findItem) {
          this.$message({
          type: "warning",
          message: "文件和文件名不能为空"
        });
        return false;
      }
      let arr = [];
      this.fileList.forEach((item, index)=> {
        arr.push({'name': item.name, url: item.file, 'type': item.type, })
      })
      param.fileJson = JSON.stringify(arr);
      this.$api.apiAddClient(param).then(({data}) => {
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功"
          });
          for (let k in this.formData) {
            this.formData[k] = '';
          }
          this.fileList = this.fileList1;
        }
        // this.$router.go(0);
        //this.$router.push({path: 'enterInfoSec', query: {clientId: res.data.data}})
      });
    }
  }
};
</script>
<style lang="scss">
#enterInfo {
  .el-upload-list {
    width: 200px;
  }
  h2 {
    background: white;
    padding: 15px;
  }
  .filetable {
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
    th {
      background: #1e7cf0;
      padding: 12px;
      color: white;
    }
    td {
      text-align: center;
      padding: 8px;
      width: 50%;
      .upload-demo {
        display: flex;
        justify-content: left;
        padding-left: 20px;
      }
      .iconfont:hover {
        cursor: pointer;
        color: #e6a23c;
      }
    }
  }
  .formList {
    width: 50%;
    margin: 0 auto;
    .el-select {
      display: block;
    }
  }
  .next {
    margin-top: 30px;
    width: 16%;
  }
  .img_input {
    position: absolute;
    left: -2000px;
    top: -100px;
  }
}
</style>
